<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import Format from '@/utils/format'
  import EchartsMixins from '../echarts.mixins'

  export default {
    mixins: [EchartsMixins],
    data() {
      return {
        charts: '',
        xList: [],
        yList: [],
        zList: [],
        xyList: [],
        seriesLists: [],
        // 监测点名称
        monitorName: '',
        yName: '',
        legendData: []
      }
    },
    computed: {
      options() {
        const Echarts = require('echarts')
        return {
          title: {
            text: this.monitorName + '监测点位移变化曲线图',
            x: 'center',
            align: 'right'
          },
          grid: {
            left: '70px',
            right: '80px',
            bottom: '50px'
          },
          // legend: {
          //   data: this.legendData,
          //   y: 'top',
          //   x: 'right',
          //   padding: [40, 5, 0, 0],
          //   // 设置为可滚动的图例
          //   type: 'scroll',
          // },

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',

              label: {
                backgroundColor: '#505765'
              }
            },
            formatter: (params, ticket, callback) => {
              var contentArr = []
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                if (i === 0) {
                  contentArr.push(Format(new Date(data.value[0])))
                }
                let str = '速率'
                if (data.seriesName.indexOf('速率') != -1) {
                  contentArr.push(data.marker + data.seriesName + ':' + data.value[1] + 'mm/d')
                } else {
                  contentArr.push(data.marker + data.seriesName + ':' + data.value[1] + 'mm')
                }
              }
              let remark = params[0]?.data?.remark || ''
              remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
              return contentArr.join('<br/>')
            },

          },
          xAxis: {
            type: 'time',
            boundaryGap: false,
            axisLine: {onZero: false},
            axisLabel: { // 坐标轴标签样式设置
              showMaxLabel:true,
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
              },
            }
          },
          yAxis: {
            name: '位移值(mm)',
            name: this.yName,
            type: 'value'
          },
          series: this.seriesLists
        }
      }
    },

    methods: {
      echartResize() {
        this.charts.resize()
      },
      updateEchart(data, monitorName, getLoginName, title) {
        this.monitorName = monitorName
        if (title !== '速率') {
          this.xList = data.xDisplacement;
          this.yList = data.yDisplacement;
          this.zList = data.zDisplacement;
          this.xyList = data.xyDisplacement;
          this.yName = '位移值(mm)'
          this.legendData = ['X位移', 'Y位移', 'Z位移', 'XY位移', 'XYZ位移']
          this.seriesLists = [{
            name: '东向',
            type: 'line',

            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.xList
          },
            {
              name: '北向',
              type: 'line',

              smooth: true,
              symbol: 'none',
              symbolSize: 4,
              data: this.yList
            },
            {
              name: '天向',
              type: 'line',

              smooth: true,
              symbol: 'none',
              symbolSize: 4,
              data: this.zList
            },
            {
              name: '水平',
              type: 'line',

              smooth: true,
              symbol: 'none',
              symbolSize: 4,
              data: this.xyList,
              markLine: {
                data: this.markLine,
                lineStyle: {normal: {type: 'dashed', color: '#BD304C'}}
              }
            }]
        } else {
          this.legendData = ['X位移速率', 'Y位移速率', 'Z位移速率', 'XY位移速率']
          this.xList = data.xSpeed;
          this.yList = data.ySpeed;
          this.zList = data.zSpeed;
          this.xyList = data.xySpeed;
          this.yName = '速率(mm/d)'
          this.seriesLists = [{
            name: '北向速率',
            type: 'line',

            smooth: true,
            symbol: 'none',
            symbolSize: 4,
            data: this.xList
          },
            {
              name: '东向速率',
              type: 'line',

              smooth: true,
              symbol: 'none',
              symbolSize: 4,
              data: this.yList
            },
            {
              name: '天向速率',
              type: 'line',

              smooth: true,
              symbol: 'none',
              symbolSize: 4,
              data: this.zList
            },
            {
              name: '水平速率',
              type: 'line',

              smooth: true,
              symbol: 'none',
              symbolSize: 4,
              data: this.xyList,
              markLine: {
                data: this.markLine,
                lineStyle: {normal: {type: 'dashed', color: '#BD304C'}}
              }
            }]
        }

        this.initEcharts()
        this.charts.setOption(this.options)
        this.echartResize()
      },
    },
  }
</script>
